<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="queryPage bg-fff">
            <view class="formContent">
                <u-form :model="form" ref="uForm" :borderBottom="false" labelPosition="top" labelWidth="auto">
                    <view class="font16 fontBold top-20">
                        （一）基础指标
                    </view>
                    <u-form-item label="1.年龄" prop="age">
                        <view class="radioGroup">
                            <view class="inp">
                                <input class="uni-input" type="number" v-model="form.age" placeholder="请输入数字" />
                            </view>
                        </view>
                    </u-form-item>
                    
                    <u-form-item label="2.教育背景" prop="jiaoyu">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.jiaoyu" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in educationList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                        </view>
                    </u-form-item>

                    <u-form-item label="3.专业技术职称和技能等级" prop="jishu">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.jishu" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in zhiChengList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                        </view>
                    </u-form-item>

                    <u-form-item label="4.您已经缴纳的社保年数" prop="shebao">
                        <view>
                            <view class="radioGroup">
                                <view class="inp">
                                    <input class="uni-input" type="number" v-model="form.shebao" placeholder="请输入缴纳社保年数" />
                                </view>
                            </view>
                            <view class="tips font12 col-grey top-5">注：缴满一年社保积3分</view>
                        </view>
                    </u-form-item>

                    <view class="font16 fontBold top-20">
                        （二）加分指标
                    </view>

                    <u-form-item label="5.创业人才" prop="rencai">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.rencai" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in renCaiList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                        </view>
                    </u-form-item>

                    <u-form-item label="6.创新创业中介服务人才" prop="rencai_service">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.rencai_service" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in renCaiServiceList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                        </view>
                    </u-form-item> 

                    <u-form-item label="7.紧缺急需专业" prop="jinji">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.jinji" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in jinQueList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                            <view class="tips font12 col-grey top-5">注：所学专业属于上海市紧缺急需专业目录，且工作岗位与所学专业一致</view>
                        </view>
                    </u-form-item>

                    <u-form-item label="8.投资纳税或带动本地就业" prop="touziJiuye">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.touziJiuye" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in touZiList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                        </view>
                    </u-form-item>

                    <block v-if="form.touziJiuye === 'true'">
                        <u-form-item label="在沪投资时间满三年及以上，最近三年企业纳税总额（万元）" prop="touzi">
                            <view class="radioGroup">
                                <view class="inp">
                                    <input class="uni-input" type="number" v-model="form.touzi" placeholder="请输入数字" />
                                </view>
                            </view>
                        </u-form-item>

                        <u-form-item label="您的投资份额（百分比 %）" prop="touzi_percent">
                            <view class="radioGroup">
                                <view class="inp">
                                    <input class="uni-input" type="number" v-model="form.touzi_percent" placeholder="请输入数字" />
                                </view>
                            </view>
                        </u-form-item>

                        <u-form-item label="企业聘用上海市户籍人员（人数）" prop="yuangong">
                            <view class="radioGroup">
                                <view class="inp">
                                    <input class="uni-input" type="number" v-model="form.yuangong" placeholder="请输入数字" />
                                </view>
                            </view>
                        </u-form-item>
                    </block>

                    <u-form-item label="9.缴纳职工社会保险费基数" prop="shebao_ratio">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.shebao_ratio" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in sbjsList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                            <view class="tips font12 col-grey top-5">注：本市社平工资参考：2019年7832元（2019年11月起8211元），2020年7月起9339元，2021年7月起10338元，2023年7月起11396元</view>
                        </view>
                    </u-form-item>

                    <u-form-item label="10.特定的公共服务领域" prop="ggFuWu">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.ggFuWu" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in fuWuList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                            <view class="tips font12 col-grey top-5">注：积分管理办法试行期间，特定的公共服务领域范围是指环卫领域</view>
                        </view>
                    </u-form-item>

                    <u-form-item label="至今为止已经工作（年）" prop="service" v-if="form.ggFuWu === 'true'">
                        <view class="radioGroup">
                            <view class="inp">
                                <input class="uni-input" type="number" v-model="form.service" placeholder="请输入数字" />
                            </view>
                        </view>
                    </u-form-item>

                    <u-form-item label="11.远郊重点区域" prop="yuanjiao">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.yuanjiao" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in yuanJiaoList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                            <view class="tips font12 col-grey top-5">注：积分管理办法试行期间，远郊重点区域是指临港地区</view>
                        </view>
                    </u-form-item>

                    <u-form-item label="至今为止已经居住（年）" prop="far" v-if="form.yuanjiao === 'true'">
                        <view class="radioGroup">
                            <view class="inp">
                                <input class="uni-input" type="number" v-model="form.far" placeholder="请输入数字" />
                            </view>
                        </view>
                    </u-form-item>

                    <u-form-item label="12.是否全日制应届高校大学毕业生" prop="biye">
                        <view class="radioGroup wrapRadio">
                            <u-radio-group v-model="form.biye" placement="column" size="17" activeColor="#007235">
                                <u-radio :name="item.key" :label="item.name" v-for="item in quanRiZhiList" :key="item.key"></u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>

                    <u-form-item label="13.在上海工作期间是否获得表彰奖励" prop="biaozhang">
                        <view class="radioGroup wrapRadio">
                            <u-radio-group v-model="form.biaozhang" placement="column" size="17" activeColor="#007235">
                                <u-radio :name="item.key" :label="item.name" v-for="item in biaoZhangList" :key="item.key"></u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>

                    <u-form-item label="14.配偶为本市户籍人员" prop="peiOu">
                        <view>
                            <view class="radioGroup wrapRadio">
                                <u-radio-group v-model="form.peiOu" placement="column" size="17" activeColor="#007235">
                                    <u-radio :name="item.key" :label="item.name" v-for="item in peiOuList" :key="item.key"></u-radio>
                                </u-radio-group>
                            </view>
                        </view>
                    </u-form-item>

                    <block v-if="form.peiOu==='true'">
                        <u-form-item label="结婚已满（年）" prop="marry_sh">
                            <view class="radioGroup">
                                <view class="inp">
                                    <input class="uni-input" type="number" v-model="form.marry_sh" placeholder="请输入数字" />
                                </view>
                            </view>
                        </u-form-item>

                        <u-form-item label="配偶落户上海已满（年）" prop="marry_sh_luohu">
                            <view class="radioGroup">
                                <view class="inp">
                                    <input class="uni-input" type="number" v-model="form.marry_sh_luohu" placeholder="请输入数字" />
                                </view>
                            </view>
                        </u-form-item>
                    </block>

                    <u-form-item label="15.三年内申请积分时提供虚假材料" prop="lie">
                        <view class="radioGroup wrapRadio">
                            <u-radio-group v-model="form.lie" placement="column" size="17" activeColor="#007235">
                                <u-radio :name="item.key" :label="item.name" v-for="item in xuJiaList" :key="item.key"></u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>

                    <u-form-item label="16.五年内行政拘留记录" prop="juliu">
                        <view class="radioGroup wrapRadio">
                            <u-radio-group v-model="form.juliu" placement="column" size="17" activeColor="#007235">
                                <u-radio :name="item.key" :label="item.name" v-for="item in juLiuList" :key="item.key"></u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>

                    <u-form-item label="17.五年内一般刑事犯罪记录" prop="zui">
                        <view class="radioGroup wrapRadio">
                            <u-radio-group v-model="form.zui" placement="column" size="17" activeColor="#007235">
                                <u-radio :name="item.key" :label="item.name" v-for="item in fanZuiList" :key="item.key"></u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>

                    <u-form-item label="18.违规生育或严重犯罪" prop="big_zui">
                        <view class="radioGroup wrapRadio">
                            <u-radio-group v-model="form.big_zui" placement="column" size="17" activeColor="#007235">
                                <u-radio :name="item.key" :label="item.name" v-for="item in yanZhongZuiList" :key="item.key"></u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>
                </u-form>
            </view>

            <up-modal :show="showModel" :showCloseBtn="false" :closeOnClickOverlay="true" @close="showModel = false" @confirm="showModel = false">
                <view class="slot-content text-center width-100">
                    <view class="contentWrap flex">
                        <view class="txtWrap flex bg-theme text-center col-fff font20 fontBold">
                            <view>您的分数为</view>
                            <view>{{ pointsNum }}</view>
                        </view>
                    </view>
                </view>
            </up-modal>
            
            <button class="submitBtn" @click="submit">提交计算</button>
            <share-btn :display="scrollAnimate" v-if="!showModel"></share-btn>
        </view>
    </block>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useConfigStore } from '@/store/index';
    // import { dispatchClient } from '@/common/api-adviser';
    import { SHJuZhuIntegralPost } from '@/common/api/menus';
    import { isBoolean } from '@/common/common';
    import { educationList, zhiChengList, renCaiList, renCaiServiceList, jinQueList, touZiList, sbjsList, fuWuList, yuanJiaoList, quanRiZhiList, biaoZhangList, peiOuList, xuJiaList, juLiuList, fanZuiList, yanZhongZuiList } from './residence-permit-params';
	export default {
        data() {
            return {
                form: {
                    age: '',
                    jiaoyu: '',
                    jishu: '',
                    sheBaoYears: "",
                    rencai: '',
                    rencai_service: '',
                    jinji: '',
                    touziJiuye: '',
                    touzi: '',
                    touzi_percent: '',
                    yuangong: '',
                    shebao_ratio: '',
                    ggFuWu: '',
                    service: '',
                    yuanjiao: '',
                    far: '',
                    biye: '',
                    biaozhang: '',
                    peiOu: '',
                    marry_sh: '',
                    marry_sh_luohu: '',
                    lie: '',
                    juliu: '',
                    zui: '',
                    big_zui: ''
                },
                educationList: educationList,
                zhiChengList: zhiChengList,
                renCaiList: renCaiList,
                renCaiServiceList: renCaiServiceList,
                jinQueList: jinQueList,
                touZiList: touZiList,
                sbjsList: sbjsList,
                fuWuList: fuWuList,
                yuanJiaoList: yuanJiaoList,
                quanRiZhiList: quanRiZhiList,
                biaoZhangList: biaoZhangList,
                peiOuList: peiOuList,
                xuJiaList: xuJiaList,
                juLiuList: juLiuList,
                fanZuiList: fanZuiList,
                yanZhongZuiList: yanZhongZuiList,
                rules: {
                    age: [
                    	{
                    		required: true,
                    		message: '请选择年龄',
                    		trigger: 'change',
                    	}
                    ],
                    jiaoyu: [
                        {
                        	required: true,
                        	message: '请选择您的学历',
                        	trigger: 'change',
                        }
                    ],
                    jishu: [
                        {
                        	required: true,
                        	message: '请选择专业技术职称和技能等级',
                        	trigger: 'change',
                        }
                    ],
                    sheBaoYears: [
                        {
                        	required: true,
                        	message: '请输入缴纳社保年数',
                        	trigger: 'blur' ,
                            pattern: '^([0]|[1-9][0-9]*)$'
                        }
                    ],
                    rencai: [
                        {
                        	required: true,
                        	message: '请选择创业人才',
                        	trigger: 'change',
                        }
                    ],
                    rencai_service: [
                        {
                        	required: true,
                        	message: '创新创业中介服务人才',
                        	trigger: 'change',
                        }
                    ],

                    jinji: [
                        {
                        	required: true,
                        	message: '请选择紧缺急需专业',
                        	trigger: 'change',
                        }
                    ],
                    touziJiuye: [
                        {
                        	required: true,
                        	message: '请选择紧投资纳税或带动本地就业',
                        	trigger: 'change',
                        }
                    ],
                    touzi: [
                        {
                            required: true,
                        	message: '请输入最近三年企业纳税总额',
                        	trigger: 'change',
                        }
                    ],
                    touzi_percent: [
                        {
                            required: true,
                        	message: '请输入您的投资份额',
                        	trigger: 'change',
                        }
                    ],
                    yuangong: [
                        {
                            required: true,
                        	message: '请输入企业聘用上海市户籍人数',
                        	trigger: 'change',
                        }
                    ],
                    shebao_ratio: [
                        {
                            required: true,
                        	message: '请选择缴纳职工社会保险费基数',
                        	trigger: 'change',
                        }
                    ],
                    ggFuWu: [
                        {
                            required: true,
                        	message: '请选择特定的公共服务领域',
                        	trigger: 'change',
                        }
                    ],
                    service: [
                        {
                            required: true,
                        	message: '请输入至今为止已经工作年数',
                        	trigger: 'change',
                        }
                    ],
                    yuanjiao: [
                        {
                            required: true,
                        	message: '请选择远郊重点区域',
                        	trigger: 'change',
                        }
                    ],
                    far: [
                        {
                            required: true,
                        	message: '请输入至今为止已经居住年数',
                        	trigger: 'change',
                        }
                    ],
                    biye: [
                        {
                            required: true,
                        	message: '请选择是否全日制应届高校大学毕业生',
                        	trigger: 'change',
                        }
                    ],
                    biaozhang: [
                        {
                            required: true,
                        	message: '请选择在上海工作期间是否获得表彰奖励',
                        	trigger: 'change',
                        }
                    ],
                    peiOu: [
                        {
                            required: true,
                        	message: '请选择配偶为本市户籍人员',
                        	trigger: 'change',
                        }
                    ],
                    marry_sh: [
                        {
                            required: true,
                        	message: '请输入结婚已满年数',
                        	trigger: 'change',
                        }
                    ],
                    marry_sh_luohu: [
                        {
                            required: true,
                        	message: '请输入配偶落户上海已满年数',
                        	trigger: 'change',
                        }
                    ],
                    lie: [
                        {
                            required: true,
                        	message: '请选择三年内申请积分时提供虚假材料次数',
                        	trigger: 'change',
                        }
                    ],
                    juliu: [
                        {
                            required: true,
                        	message: '请选择五年内行政拘留记录',
                        	trigger: 'change',
                        }
                    ],
                    zui: [
                        {
                            required: true,
                        	message: '请选择五年内一般刑事犯罪记录',
                        	trigger: 'change',
                        }
                    ],
                    big_zui: [
                        {
                            required: true,
                        	message: '请选择是否违规生育或严重犯罪',
                        	trigger: 'change',
                        }
                    ]
                },
                scrollAnimate: false,
                productId: '',
                title: '',
                showModel: false,
                pointsNum: 0,
                share: false,
                start_time: 0
            }
        },
        onReady() {
            //#ifdef MP-WEIXIN
        	this.$refs.uForm.setRules(this.rules);
            //#endif
        },
        computed:{
        	...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useConfigStore, ['scene'])
        },
        onLoad(options){
            let { productId='', title='', puid='', share=false } = options;
            const that = this;
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);
            this.start_time = (new Date()).getTime();
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }

            uni.$check_and_login(function(){
                //绑定客户
                // dispatchClient({
                //     share: that.share,
                //     puid: puid,
                //     pid: that.productId
                // });
            });
        },

        onPageScroll() {
            const that = this;
            that.scrollAnimate = true;
            this.$u.debounce(function() {
                that.scrollAnimate = false;
            }, 500);
        },
        
		onShareTimeline() {
		  return {
			title: '上海居住证积分查询',
            query: `productId=${this.productId}&puid=${this.userInfo.id}&title=${this.title}&share=true&prepage=新房认购分数查询-${this.productId}-${this.title}`
		  }
		},

		onShareAppMessage() {
		    return {
		        title: '上海居住证积分查询',
		        path: `/pages/tools/residence-permit/integral-query?productId=${this.productId}&puid=${this.userInfo.id}&title=${this.title}&share=true&prepage=新房认购分数查询-${this.productId}-${this.title}`,
			}
		},
		methods:{
            ...mapActions(useUserInfoStore, ['setPuid']),
            //提交
            submit(){
                const that = this;
                this.$refs.uForm.validate().then(valid => {
                	if (valid) {
                        that.calcIntegral()
                	}
                })
            },
            
            //计算分数
            async calcIntegral() {
                try {
                    const { status, detail } = await SHJuZhuIntegralPost({
                        ...this.form,
                        age: Number(this.form.age),
                        touzi: this.form.touzi || 0,
                        yuangong: this.form.yuangong || 0,
                        far: this.form.far || 0,
                        marry_sh: this.form.marry_sh || 0,
                        marry_sh_luohu: this.form.marry_sh_luohu || 0,
                        lie: Number(this.form.lie),
                        juliu: Number(this.form.juliu),
                        zui: Number(this.form.zui),
                        touzi_percent: parseInt(this.form.touzi_percent) || 0,
                        shebao: parseInt(this.form.shebao) || 0,
                        service: this.form.service || 0,
                        rencai: this.form.rencai === 'true',
                        rencai_service: this.form.rencai_service === 'true',
                        jinji: this.form.jinji === 'true',
                        biye: this.form.biye === 'true',
                        big_zui: this.form.big_zui === 'true'
                    })

                    if(status !== 0) {
                        uni.$u.toast(detail);
                        return
                    }
                    this.pointsNum = detail;
                    this.showModel = true;
                } catch (error) {}
            }
		}
    }
</script>

<style lang="scss" scoped>
    .queryPage{
        min-height: 100vh;
        overflow: hidden;
        .formContent{
            padding: 0 28rpx;
        }
        .u-form-item{
            font-size: 32rpx !important;
            &::after{
                display: none;
                border: none;
            }
        }
        
        .radioGroup{
            font-size: 28rpx;
            .u-radio{
                margin-right: 28rpx;
                padding: 10rpx 20rpx;
                border: 1rpx solid rgba(0,0,0,.05);
                .u-radio__label{
                    width: 100%;
                    margin-left: 30rpx;
                }
            }
            .inp{
                border: 1rpx solid rgba(0,0,0,.05);
            }
        }
        .wrapRadio{
            .u-radio{
                margin-bottom: 28rpx;
            }
        }
        .tips{
            line-height: 1.4;
        }
        .contentWrap{
            padding: 50rpx 0;
			.txtWrap{
				width: 40vw;
				height: 40vw;
				line-height: 1.4;
				border-radius: 50%;
                flex-direction: column;
			}
		}
        .submitBtn{
            margin: 28rpx;
            background-color: $theme-color;
            color: #FFFFFF;
            &::after{
                border: none;
            }
        }
    }
</style>
